import React, { useContext, useEffect, useRef, useState } from 'react';
import {
    Avatar,
    Card,
    Col,
    Divider,
    Row,
    Spin,
    Modal,
    Form,
    Input,
    Select,
    InputNumber,
    Button,
    message
} from "antd";
import {
    EditOutlined,
    EllipsisOutlined,
    LikeOutlined,
    PlusOutlined,
    SettingOutlined,
    ShareAltOutlined, StarOutlined, WechatWorkOutlined
} from "@ant-design/icons";
import styles from './baseInfo.module.less';
import Meta from "antd/es/card/Meta";
import { useTranslation } from 'react-i18next';

import { getDataCeneterList, addDataCenter, editDataCenterApi } from '@src/services/dataCenter';

import { PublicDataStore } from '@src/store/PublicData/Provider';

const DataCenter = () => {
    const { state } = useContext(PublicDataStore);
    const addDataCenterRef = useRef(null);
    const editDataCenterRef = useRef(null);
    const { t } = useTranslation();

    const [dataCenterList, setDataCenterList] = useState([]);
    const [dataCeneterLoading, setDataCeneterLoading] = useState(false);
    const [addDataCenterVisible, setAddDataCenterVisible] = useState(false);
    const [addDataCeneterLoading, setAddDataCeneterLoading] = useState(false);
    const [editDataCenterVisible, setEditDataCenterVisible] = useState(false);
    const [editDataCenterData, setEditDataCenterData] = useState({});
    const [editDataCeneterLoading, setEditDataCeneterLoading] = useState(false);
    const [addSelectBusiness, setAddSelectBusiness] = useState({
        key: '',
        value: '',
        children: ''
    });

    useEffect(() => {
        onLoad();
    }, []);

    const onLoad = async () => {
        setDataCeneterLoading(true);
        const res = await getDataCeneterList();

        if (!res) return;

        setDataCeneterLoading(false);
        setDataCenterList(res);
    }

    const onAddDataCenterFinish = async (data) => {
        setAddDataCeneterLoading(true);

        const res = await addDataCenter(data);

        setAddDataCeneterLoading(false);
        if (!res) return;

        message.success('成功新增数据');
        onLoad();
        onCancelAddDataCenter();
    }

    const onEditDataCenterFinish = async (data) => {
        setEditDataCeneterLoading(true);

        const res = await editDataCenterApi(data);

        setEditDataCeneterLoading(false);
        if (!res) return;

        message.success('成功编辑数据');
        onLoad();
        onCancelEditDataCenter();
    }


    const onCancelAddDataCenter = () => {
        setAddDataCenterVisible(false);
        setAddSelectBusiness({
            key: '',
            value: '',
            children: ''
        });
        addDataCenterRef.current.resetFields();
    }

    const onCancelEditDataCenter = () => {
        setEditDataCenterVisible(false);
        editDataCenterRef.current.resetFields();
        setEditDataCenterData({});
    }

    return (
        <div className={styles.data_center}>
            <Spin spinning={dataCeneterLoading}>
                <Divider orientation="left">{t('Data Center')}</Divider>
                <div className={styles.data_center_list}>
                    <div onClick={() => setAddDataCenterVisible(true)} className={`${styles.add_data_center_btn} ${styles.item_box}`}>
                        <Card style={{
                            width: '3.5rem',
                            textAlign: 'center',
                            verticalAlign: 'middle',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flexDirection: 'column',
                            display: 'flex',
                            cursor: 'pointer'
                        }} className={styles.cardHeight}>
                            <p><PlusOutlined /></p>
                            <p>{t('New data resource')}</p>
                        </Card>
                    </div>

                    {
                        dataCenterList?.map((item) => (
                            <div key={item.business_server_id} className={styles.item_box}>
                                <Card
                                    actions={[
                                        <ShareAltOutlined key="share" />,
                                        <EditOutlined key="edit" onClick={() => {
                                            setEditDataCenterData(item);
                                            setEditDataCenterVisible(true);
                                        }} />,
                                    ]}
                                >
                                    <Meta
                                        title={item.server_name}
                                    />
                                    <p>
                                        {item.description}
                                    </p>
                                    <div className={styles.likes}>
                                        <StarOutlined /> {item.collects} | <LikeOutlined />{item.likes} | <WechatWorkOutlined /> 23
                                        <span className={styles.pass}>{t('Available')}</span>
                                        {/* <span className={styles.no_pass}>审核未通过</span> */}
                                        {/* <span className={styles.checking}>审核中</span> */}
                                    </div>
                                </Card>
                            </div>
                        ))
                    }
                    {
                        [...Array(6)].map((_, index) => (
                            <i key={index} className={styles.item_box} />
                        ))
                    }
                </div>
            </Spin>

            <Modal
                open={addDataCenterVisible}
                footer={null}
                onCancel={onCancelAddDataCenter}
                title={t('New data resource')}
            >
                <div className={styles.add_data_center_modal}>
                    <Form
                        layout='vertical'
                        onFinish={onAddDataCenterFinish}
                        ref={addDataCenterRef}
                    >
                        <Form.Item
                            label={t('Serve')}
                            name="business_id"
                            rules={[
                                {
                                    required: true,
                                    message: t('Please select a service')
                                },
                            ]}
                        >
                            <Select
                                name="business_id"
                                onSelect={(_, option) => {
                                    setAddSelectBusiness(option);
                                }}
                            >
                                {state.companyInof?.company_business?.map(item => (
                                    <Select.Option key={item.business_id} value={item.business_id}>{t(item.business_name)}</Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label={t('City')}
                            name="city_id"
                            rules={[
                                {
                                    required: true,
                                    message: t('Please select a city')
                                },
                            ]}
                        >
                            <Select name="city_id"  >
                                {state.city?.map(item => (
                                    <Select.Option key={item.city_id} value={item.city_id}>{item?.[sessionStorage.getItem('ai_lang')]}</Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label={t('Service Name')}
                            name="server_name"
                            rules={[
                                {
                                    required: true,
                                    message: t('Please enter the service name')
                                },
                            ]}
                        >
                            <Input name="server_name" />
                        </Form.Item>
                        <Form.Item
                            label={t('Describe')}
                            name="description"
                        >
                            <Input name="description" />
                        </Form.Item>
                        <Form.Item
                            label={addSelectBusiness?.children === '裸光纤' ? t('Kilometers') : t('Bandwidth')}
                            name="max_bandwidth"
                            // dependencies={['business_id']}
                            rules={[
                                {
                                    required: true,
                                    message: t('Please enter bandwidth')
                                },
                            ]}
                        >
                            <InputNumber name="max_bandwidth" style={{ width: '100%' }} />
                        </Form.Item>
                        <div className={styles.footer_box}>
                            <Button type='ghost' onClick={onCancelAddDataCenter}>{t('Cancel')}</Button>
                            <Button type='primary' htmlType='submit' loading={addDataCeneterLoading}>{t('Sure')}</Button>
                        </div>
                    </Form>
                </div>
            </Modal>

            <Modal
                open={editDataCenterVisible}
                footer={null}
                onCancel={onCancelEditDataCenter}
                title={t('Edit Data Center')}
            >
                <div className={styles.add_data_center_modal}>
                    <Form
                        layout='vertical'
                        onFinish={onEditDataCenterFinish}
                        ref={editDataCenterRef}
                        initialValues={editDataCenterData}
                    >
                        <Form.Item
                            label={t('Serve')}
                            name="business_server_id"
                            rules={[
                                {
                                    required: true,
                                    message: t('Please select a service')
                                },
                            ]}
                        >
                            <Select
                                name="business_server_id"
                                disabled={true}
                            >
                                {state.companyInof?.company_business?.map(item => (
                                    <Select.Option key={item.business_id} value={item.business_id}>{item.business_name}</Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label={t('City')}
                            name="city_id"
                            rules={[
                                {
                                    required: true,
                                    message: t('Please select a city')
                                },
                            ]}
                        >
                            <Select name="city_id"  >
                                {state.city?.map(item => (
                                    <Select.Option key={item.city_id} value={item.city_id}>{item?.[sessionStorage.getItem('ai_lang')]}</Select.Option>
                                ))}
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label={t('Service Name')}
                            name="server_name"
                            rules={[
                                {
                                    required: true,
                                    message: t('Please enter the service name')
                                },
                            ]}
                        >
                            <Input name="server_name" />
                        </Form.Item>
                        <Form.Item
                            label={t('Describe')}
                            name="description"
                        >
                            <Input name="description" />
                        </Form.Item>
                        <Form.Item
                            label={editDataCenterData?.business_name === '裸光纤' ? t('Kilometers') : t('Bandwidth')}
                            name="max_bandwidth"
                            rules={[
                                {
                                    required: true,
                                    message: t('Please enter bandwidth')
                                },
                            ]}
                        >
                            <InputNumber name="max_bandwidth" style={{ width: '100%' }} />
                        </Form.Item>
                        <div className={styles.footer_box}>
                            <Button type='ghost' onClick={onCancelAddDataCenter}>{t('Cancel')}</Button>
                            <Button type='primary' htmlType='submit' loading={editDataCeneterLoading}>{t('Sure')}</Button>
                        </div>
                    </Form>
                </div>
            </Modal>
        </div>
    );
};

export default DataCenter;
